<template>
  <div class="index-container">
    <!--顶部导航栏-->
    <Navbar class = "navbar"  id="nav" ></Navbar>
    <DateTime  class = "datetime"  v-if="ifShow"></DateTime>
    <!--使用弹性盒子实现左右结构-->
    <div class="index-main" id="index" >
      <!--左侧-->
      <!--      <div  class="index-main-column-left">-->
      <HotTab class = "hottab"  v-if="ifShow"></HotTab>
      <PermissionsResult v-if="!ifShow" class = "hottab" ></PermissionsResult>
      <!--      </div>-->
      <!--右侧-->
      <!--      <div  class="index-main-column-right">-->
      <!--      </div>-->
    </div>

    <!--回到顶部-->
    <el-backtop style="box-shadow: none;background: none;">
      <i alt="" src="../assets/toTopLogo.webp" style="width: 40px;height: 40px;"></i>
    </el-backtop>
    <!--底部footer-->
    <Footer class="index-foot"></Footer>


  </div>
</template>

<script>
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import HotTab from "../components/HotTab";
import DateTime from "../components/DateTime";
import PermissionsResult from "../components/PermissionsResult";

export default {
  name: "Chart",
  components: {Footer, Navbar, HotTab,DateTime,PermissionsResult},
  data(){
    return{
      ifShow:false
    }
  },
  created() {
    if(this.$store.getters.getUser){
      if(this.$store.getters.getUser.role=="role_user"|| this.$store.getters.getUser.role=="role_root"){
        this.ifShow = true
      }
      else {
        this.$message.error("你没有权限")
      }
    }
    else {
      this.$message.error("你没有权限")
    }
  },
}
</script>

<style scoped>
.navbar {
  top: 0;
  z-index:9999;
  width: 100%;
  opacity: 0.9;
}
.index-container {
  min-height: 100vh;
  background-image: url("https://cdn.jsdelivr.net/gh/yubifeng/blog-resource/bloghosting/2021/04/23/first87.png")!important; ;
  background-repeat: repeat-x;
  background-attachment:fixed;
  background-size:cover;
}
.index-foot {
  background-color: #333333;
  color: white!important;
  opacity: 0.9;
  position: relative;
  margin-top: 200px;
}

.hottab{

  width: 1000px;
  margin: 0 auto;
  opacity: 0.97;
}
.index-main {
  display: flex;
  margin-top: 10px;
  margin-bottom: 40px;
  padding-top: 20px;
  margin-left: auto !important;
  margin-right: auto !important;
  opacity: 0.97;
}

.index-main-column-left {
  padding: 0;
  margin-right: 20px;
  margin-left: 10px;
}

.index-main-column-right {
  padding: 0;
  margin-left: 20px;
  margin-right: 30px;
}

::v-deep .el-tabs__item.is-top{
  width: 250px !important;
  font-size: 20px;
  text-align: center;
}
</style>